<template>
  <div>
    <div class="box_bg">
      <ScaleBox class="bg" :width="1024" :height="768" bgc="#00060f" :delay="100" :isFlat="false">
        <div class="main-container chemicalProcess">
          <div class="center_">
            <div class="nav_title">人工智能种植</div>
          </div>
          <div class="center_">
            <div class="jc">
              <div class="jc_boxs" v-for="item in ghAttrList" :key="item.id">
                <img class="nav_box" src="../../../assets/jc_nav.png" alt="" />
                <div class="status_box">{{ item.status == 0 ? '离线' : item.status == 1 ? '在线' : '告警' }}</div>
                <div class="content">
                  <img class="icon_img" :src="item.icon" alt="" />
                  <div>
                    <div class="deviceName">{{ item.name }}</div>
                    <div class="num">{{ item.realData }}{{ item.unit }}</div>
                  </div>
                </div>
                <div class="time_box">
                  <img class="time_img" src="../../../assets/time.png" alt="" />
                  {{ item.updateTime }}
                </div>
                <!-- <img class="jc_img" :src="item.img" alt="" />
              <div>{{ item.name }}</div> -->
              </div>
            </div>
          </div>

          <div class="center_">
            <div class="bottom">
              <div @click="getIndx(item.src)" class="bottom_box" v-for="(item, index) in boxList" :key="index">
                <img class="nav_img" :src="item.img" alt="" />
                <div>{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </ScaleBox>
    </div>
  </div>
</template>
<script>
// import store from '@/store'
import echarts from 'echarts'
import { getAiAsk } from '@/api/system'
import ScaleBox from 'vue2-scale-box'
import moment from 'moment'
import { getGhAttrList } from '@/api/system'

export default {
  components: {
    ScaleBox
  },
  data() {
    return {
      indexc: 0,
      ghAttrList: [],
      boxList: [
        {
          img: require('../../../assets/home.png'),
          name: '首页',
          src: '/home/home'
        },
        {
          img: require('../../../assets/jc_active.png'),
          name: '在线监测'
        },
        {
          img: require('../../../assets/kz.png'),
          name: '控制模式',
          src: '/home/controlMode'
        },
        {
          img: require('../../../assets/xt.png'),
          name: '系统参数',
          src: '/home/system'
        }
      ],
      timer: ''
    }
  },
  mounted() {
    this.getGhAttrList()
    this.timer = setInterval(() => {
      this.getGhAttrList()
    }, 10000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getIndx(val) {
      this.$router.push({
        path: val
      })
    },
    // 获取在线检测数据
    getGhAttrList() {
      let form = {
        pageSize: 100
      }
      getGhAttrList(form).then(res => {
        if (res.code == 200) {
          this.ghAttrList = res.data
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.bg {
  background: url('../../../assets/jc_bg.png') no-repeat center center;
  // width: 100vw;
  height: 100vh;
  width: 100vw;
  // background-color: #05032e;
  /*把背景图片放大到适合元素容器的尺寸，图片比例不变*/
  background-size: cover;
}
.box_bg {
  background-color: #011e7b !important;

  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.center_ {
  display: flex;
  justify-content: center;
  .nav_title {
    font-family: 'MyCustomFont', sans-serif;
    display: flex;
    justify-content: center;
    // background: url('../assets/title.png') no-repeat center center;
    position: absolute;
    top: 20px;
    font-size: 42px;
    color: #ffffff;
    line-height: 58px;
    text-align: justify;
    font-style: normal;
    background: linear-gradient(90deg, #ffffff 0%, #0771ff 97%, #006dff 100%);
    -webkit-background-clip: text;
    color: transparent;

    .nav_t {
      font-weight: bolder;
      font-size: 34px;
      color: #3de6ff;
      line-height: 48px;
      text-align: center;
      font-style: normal;
      background: linear-gradient(90deg, #ffffff 0%, #02c2cb 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
@font-face {
  font-family: 'MyCustomFont'; /* 定义字体的名称 */
  src: url('../../../assets/tt.ttf') format('truetype'); /* 指定字体文件的路径和格式 */
}
/* 自定义整个滚动条 */
::-webkit-scrollbar {
  width: 12px; /* 设置滚动条的宽度 */
}

/* 自定义滚动条轨道 */
::-webkit-scrollbar-track {
  background: transparent; /* 设置轨道的背景颜色 */
}

/* 自定义滚动条的滑块（thumb） */
::-webkit-scrollbar-thumb {
  background: #cceaf8; /* 设置滑块的背景颜色 */
  height: 12px;
}

/* 当滑块悬停或活动时，可以添加更多样式 */
::-webkit-scrollbar-thumb:hover {
  background: #555; /* 设置滑块在悬停状态下的背景颜色 */
}
/deep/.el-input-group__append {
  background-color: #387dff;
  color: #ffffff;
  cursor: pointer;
}
/deep/.el-input__icon {
  font-size: 42px;
  margin-top: 25px;
}
/deep/ .el-input__inner {
  font-weight: bold;
  font-size: 42px;
  color: #999999;
  text-align: left;
  height: 100px;
  font-style: normal;
  border: none;
  border-radius: 9px;
  padding-left: 60px;
  background: rgba(11, 63, 173, 0.72);
  border-radius: 20px 0 0 20px;
  border-image: radial-gradient(circle, rgba(51, 201, 255, 1), rgba(31, 104, 198, 1), rgba(102, 188, 255, 1)) 3 3;
}
.jc::-webkit-scrollbar {
  display: none;
}
.jc {
  position: absolute;
  top: 173px;
  width: 100%;
  height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-top: 25px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;

  .jc_boxs {
    margin-bottom: 15px;
    position: relative;
    .content {
      display: flex;
      width: 100%;
      position: absolute;
      left: 20px;
      .icon_img {
        width: 67px;
        height: 61px;
        margin-right: 15px;
      }
      .deviceName {
        font-weight: 600;
        font-size: 18px;
        color: #ffffff;
      }
      .num {
        font-size: 24px;
        color: #006dff;
      }
    }
    .time_box {
      display: flex;
      align-items: center;
      position: absolute;
      bottom: 10px;
      .time_img {
        width: 16px;
        height: 16px;
        margin-right: 15px;
      }
      font-weight: 400;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
    }
    .status_box {
      position: absolute;
      right: 15px;
      top: 5px;
      width: 65px;
      height: 27px;
      border-radius: 15px;
      border: 1px solid #3e7ef5;
      font-weight: 500;
      font-size: 14px;
      color: #006dff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .nav_box {
      position: absolute;
      width: 240px;
      height: 155px;
    }
    display: flex;

    flex-flow: column;
    align-items: center;
    justify-content: center;
    height: 155px;
    font-weight: 500;
    font-size: 24px;
    color: #ffffff;
    cursor: pointer;
    .jc_img {
      height: 194px;
    }
  }
}
.bottom {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: space-around;
  width: 957px;
  .bottom_box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 175px;
    height: 63px;
    border-radius: 8px;
    border: 1px solid #2a3549;
    cursor: pointer;
    font-size: 24px;
    color: #ffffff;
    .nav_img {
      width: 44px;
      height: 44px;
    }
  }
  .bottom_box:nth-child(2) {
    border: 1px solid #006dff;
    color: #006dff;
  }
}
</style>
